<template>
	<div style="margin-top: 40px;width: 80%">

		<div style="">
			<el-row>
				<el-col :span="24">
					<el-button type="primary" @click="goBack()">返回
					</el-button>
				</el-col>
			</el-row>
			<div style="border: 1px solid #DCDCDC;background-color: #FFFFFF;">
				<div style="padding: 20px;margin-bottom: 20px;">
					实名认证
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label-width="130px" label="姓名：">
						<el-input  v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="身份证：">
						<el-input  v-model="form.certificatesNumber"></el-input>
					</el-form-item>
					<!-- <el-form-item label-width="130px" label="身份证有效期：">
						<el-date-picker  v-model="form.certificatesValidity" value-format="yyyy-MM-dd" type="date" @change="getSTime" placeholder="选择日期">
						</el-date-picker>
						<el-checkbox @change="getCertificates" v-model="checked">长期有效</el-checkbox>
					</el-form-item>
					<br> -->
					<el-form-item label-width="130px" label="联系人手机号：">
						<el-input  v-model="form.phoneNum"></el-input>
					</el-form-item>
					<!-- <el-form-item label-width="130px" label="联系人邮箱：">
						<el-input  v-model="form.email"></el-input>
					</el-form-item> -->
					<!-- <br>
					<el-form-item label-width="130px" label="商家所在地：">
						<el-cascader style="width: 300px;" v-model="addressValue" :options="optionsAddress" @change="handleChangeStoreZone" ref="cascaderStoreAddr"></el-cascader>
					
					</el-form-item>
					<el-form-item label-width="130px" label="商家详细地址：">
						<el-input v-model="form.address"></el-input>
					</el-form-item> -->
					
				</el-form>
			</div>
			<br>
			<div style="border: 1px solid #DCDCDC;background-color: #FFFFFF;">
				<div style="padding: 20px;margin-bottom: 20px;">
					银行卡信息
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
					<el-form-item label-width="130px" label="银行卡户名：">
						<el-input  v-model="form.bankAccountName"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="结算银行卡：">
						<el-input  v-model="form.bankCardNo"></el-input>
					</el-form-item>
					<br>
					<el-form-item label-width="130px" label="选择开户行：">
						<el-select style="width: 190px;" v-model="form.bankName" placeholder="请选择" @change="changeSelect">
							<el-option v-for="item in cardNameList" :key="item.name" :label="item.name" :value="item.name">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label-width="130px" label="开户行地区：">
						<el-cascader style="width: 300px;" v-model="value" :options="optionsAddress" @change="handleChangeZone" ref="cascaderAddr"></el-cascader>
					
					</el-form-item>
					<br>
					<el-form-item label-width="130px" label="开户行编号：">
						<el-input v-model="form.bankCode"></el-input>
					</el-form-item>
					<el-form-item label-width="130px" label="开户支行名称：">
						<el-input v-model="form.bankBranchName"></el-input>
					</el-form-item>

				</el-form>
			</div>
			<br>
			<div style="border: 1px solid #DCDCDC;background-color: #FFFFFF;">
				<div style="padding: 20px;margin-bottom: 20px;">
					影印件信息
				</div>
				<el-form :inline="true" :model="form" class="demo-form-inline">
						<el-form-item label-width="150px">
							<div style="width: 200px;text-align: center;">
								<p>身份证正面:</p>
								<div style="display: inline-block;text-align: center">
									<we-ui-uploads :images="form.certificatesFront" :maxCount="1" :maxSize="1024*1024" @uploading="uploading4"></we-ui-uploads>
								</div>
							</div>
						</el-form-item>
						<el-form-item label-width="150px">
							<div style="width: 200px;text-align: center;">
								<p>身份证反面:</p>
								<div style="display: inline-block;text-align: center">
									<we-ui-uploads :images="form.certificatesBack" :maxCount="1" :maxSize="1024*1024" @uploading="uploading5"></we-ui-uploads>
								</div>
							</div>
						</el-form-item>
					
		
						<!-- <el-form-item>
							<div style="width: 200px;text-align: center;">
								<p>手持身份证正面:</p>
								<div style="display: inline-block;text-align: center">
									<we-ui-uploads :images="form.certificatesInHandFront" :maxCount="1" :maxSize="1024*1024" @uploading="uploading7"></we-ui-uploads>
								</div>
							</div>
						</el-form-item> -->
						<!-- <el-form-item>
							<div style="width: 200px;text-align: center;">
								<p>手持银行卡:</p>
								<div style="display: inline-block;text-align: center">
									<we-ui-uploads :images="form.bankCardInHand" :maxCount="1" :maxSize="1024*1024" @uploading="uploading10"></we-ui-uploads>
								</div>
							</div>
						</el-form-item> -->
					<el-form-item>
							<div style="width: 200px;text-align: center;">
								<p>银行卡包含卡号一面:</p>
								<div style="display: inline-block;text-align: center">
									<we-ui-uploads :images="form.bankCardFont" :maxCount="1" :maxSize="1024*1024" @uploading="uploading7"></we-ui-uploads>
								</div>
							</div>
						</el-form-item>
					
					

				</el-form>
				<div style="margin: 10px;">
					<el-button type="primary" @click="submitForm" :disabled="false" :loading="loading">提交
					</el-button>
				</div>
			</div>
	
			<div style="width: 100%;height: 50px;"></div>


		</div>
		<el-dialog title="拒绝理由" v-model="dialogVisible" size="tiny" style="min-width: 400px">
		      <el-form label-width="110px">          
		          <el-form-item label="拒绝理由：" >
		                 <el-input  v-model="refuseReason" class="length_150"></el-input>
		          </el-form-item>
		    </el-form>
		     <div style="text-align: center">
		         <el-button type="primary" @click="submit" :disabled="!refuseReason" :loading="loading">保 存
		         </el-button>
		     </div>
		     
		</el-dialog>   

		<div class="weui-gallery" style="display: block;z-index: 9999;" v-show="img.is_preview">
			<span class="weui-gallery__img" :style="{backgroundImage:img.preview_url,transform:img.transform}" @click="hidePreview"></span>
			<div class="weui-gallery__opr white_pointer">
				<div class="weui-gallery__del" @click.prevent="rotate()">
					<img src="../../assets/images/xuanzhuan.png" height="25" width="25">
					<span class="weui-span_del">旋转</span>
				</div>
			</div>
		</div>
	</div>

</template>
<style>

</style>

<script>
	import address from '../../address.js'
	export default {
		data() {
			return {
				loading: false,
				checked: false,
				form: {
					storeId: '',
					businessLicense: '',
					certificatesFront: [],
					certificatesBack: [],
					bankCardFont: [],
					certificatesInHandFront: [],
					bankCardInHand: [],
					name: '',
					certificatesNumber: '',
					certificatesValidity: '',
					phoneNum: '',
					email: '',
					bankCardNo: '',
					bankAccountName: '',
					bankCode: '',
					bankName: '',
					bankProv: '',
					bankCity: '',
					isMark: 2,
					partnerUserId: '',
					province: '',
					city: '',
					area: '',
					address: ''
				},
				value: ['110000', '110100'],
				addressValue: ['110000', '110100'],
				sortList: [],
				secondList: [],
				startTime: '',
				typeList: [{
					text: '物流商超',
					value: '1'
				}, {
					text: '服务行业',
					value: '2'
				}, {
					text: '酒店',
					value: '3'
				}],
				endTime: '',
				userName: '',
				dialogVisible: false,
				id: '',
				show: '',
				storeImgList: [],
				contactNum: '',
				contact: '',
				cantclick: false,
				msgCode: '',
				img: {
					is_preview: false,
					preview_url: '',
					image_index: null,
					preview_images: [],
					transform: ''
				},
				refuseReason: '',
				stateList: [{
						text: '审核中',
						value: '0'
					},
					{
						text: '平台拒绝',
						value: '1'
					},
					{
						text: '平台通过',
						value: '2'
					},
					{
						text: '快捷通拒绝',
						value: '3'
					},
					{
						text: '快捷通通过',
						value: '4'
					}
				],
				cardNameList: [{
						"name": "农业银行",
						"code": "ABC"
					},
					{
						"name": "中国银行",
						"code": "BOC"
					},
					{
						"name": "建设银行",
						"code": "CCB"
					},
					{
						"name": "工商银行",
						"code": "ICBC"
					},
					{
						"name": "交通银行",
						"code": "COMM"
					},
					{
						"name": "中信银行",
						"code": "CITIC"
					},
					{
						"name": "光大银行",
						"code": "CEB"
					},
					{
						"name": "华夏银行",
						"code": "HXB"
					},
					{
						"name": "民生银行",
						"code": "CMBC"
					},
					{
						"name": "广东发展银行",
						"code": "GDB"
					},
					{
						"name": "平安银行",
						"code": "SZPAB"
					},
					{
						"name": "招商银行",
						"code": "CMB"
					},
					{
						"name": "兴业银行",
						"code": "CIB"
					},
					{
						"name": "浦东发展银行",
						"code": "SPDB"
					},
					{
						"name": "南京银行",
						"code": "NJCB"
					},
					{
						"name": "宁波银行",
						"code": "NBCB"
					},
					{
						"name": "汉口银行",
						"code": "HKBCHINA"
					},
					{
						"name": "杭州银行",
						"code": "HCCB"
					},
					{
						"name": "广州市商业银行",
						"code": "GZCB"
					},
					{
						"name": "浙江稠州商业银行",
						"code": "CZCB"
					},
					{
						"name": "长沙银行",
						"code": "CSCB"
					},
					{
						"name": "城市商业银行",
						"code": "CITYBANK"
					},
					{
						"name": "上海银行",
						"code": "BOS"
					},
					{
						"name": "北京银行",
						"code": "BCCB"
					},
					{
						"name": "晋城市商业银行",
						"code": "SXJS"
					},
					{
						"name": "温州市商业银行",
						"code": "WZCB"
					},
					{
						"name": "广州市农信社",
						"code": "GNXS"
					},
					{
						"name": "农村商业银行",
						"code": "RCB"
					},
					{
						"name": "顺德农信社",
						"code": "SDE"
					},
					{
						"name": "恒丰银行",
						"code": "EGBANK"
					},
					{
						"name": "浙商银行",
						"code": "CZB"
					},
					{
						"name": "农村合作银行",
						"code": "URCB"
					},
					{
						"name": "渤海银行",
						"code": "CBHB"
					},
					{
						"name": "徽商银行",
						"code": "HSBANK"
					},
					{
						"name": "村镇银行",
						"code": "COUNTYBANK"
					},
					{
						"name": "重庆三峡银行",
						"code": "CCQTGB"
					},
					{
						"name": "上海农村商业银行",
						"code": "SHRCB"
					},
					{
						"name": "城市信用合作社",
						"code": "UCC"
					},
					{
						"name": "北京农商行",
						"code": "BJRCB"
					},
					{
						"name": "珠海市农村信用合作社",
						"code": "ZHNX"
					},
					{
						"name": "尧都信用合作联社",
						"code": "YDXH"
					},
					{
						"name": "深圳农村商业银行",
						"code": "SNXS"
					},
					{
						"name": "农村信用合作社",
						"code": "RCC"
					},
					{
						"name": "湖南农信社",
						"code": "HNNXS"
					},
					{
						"name": "中国邮储银行",
						"code": "PSBC"
					},
					{
						"name": "浙江省农村信用社联合社",
						"code": "ZJRC"
					},
					{
						"name": "河南农村信用社",
						"code": "HNNX"
					},
					{
						"name": "江苏农村信用社联合社",
						"code": "JSNX"
					},
					{
						"name": "吉林省农村信用社",
						"code": "JLNLS"
					},
					{
						"name": "河北省农村信用社",
						"code": "HEBNX"
					},
					{
						"name": "内蒙古农村信用社",
						"code": "NMGNXS"
					},
					{
						"name": "辽宁省农村信用社",
						"code": "LNRCC"
					},
					{
						"name": "云南省农村信用社",
						"code": "YNRCC"
					},
					{
						"name": "湖北农村信用社",
						"code": "HBXH"
					},
					{
						"name": "广东农村信用社",
						"code": "GDRC"
					},
					{
						"name": "海南省农村信用社",
						"code": "HNB"
					},
					{
						"name": "山西农村信用社",
						"code": "SXRCU"
					},
					{
						"name": "安徽农村信用社联合社",
						"code": "AHRCU"
					},
					{
						"name": "山东省农村信用社",
						"code": "SDNXS"
					},
					{
						"name": "四川农村信用社",
						"code": "SCRCU"
					},
					{
						"name": "广西农村信用社",
						"code": "GXNXS"
					},
					{
						"name": "陕西农村信用社",
						"code": "SXNXS"
					},
					{
						"name": "福建农村信用社",
						"code": "FJNX"
					},
					{
						"name": "江西农村信用社",
						"code": "JXNXS"
					},
					{
						"name": "贵州农信社",
						"code": "GZRCU"
					},
					{
						"name": "黑龙江农村信用社",
						"code": "HLJRCC"
					},
					{
						"name": "新疆农信社",
						"code": "XJRCCB"
					},
					{
						"name": "青海农信社",
						"code": "QHRCCB"
					},
					{
						"name": "甘肃省农村信用社",
						"code": "GSRCU"
					},
					{
						"name": "浙江民泰商业银行",
						"code": "MTB"
					},
					{
						"name": "哈尔滨银行",
						"code": "HRBCB"
					},
					{
						"name": "中原银行",
						"code": "ZYB"
					},
					{
						"name": "贵阳银行",
						"code": "GYB"
					},
					{
						"name": "郑州银行",
						"code": "ZZBANK"
					},
					{
						"name": "成都银行",
						"code": "BOCD"
					},
					{
						"name": "重庆银行",
						"code": "CQCBANK"
					},
					{
						"name": "青岛银行",
						"code": "QDB"
					},
				],
				optionProps: {
					label: 'label',
					value: 'value',
					children: 'children'
				},
				newBusinessLicense: [],
				optionsAddress: address(),
				readonly: false,
				networdUrlPhotostr: [],
				agreeLoading: false,
			}
		},
		created() {
			this.form.storeId = JSON.parse(sessionStorage.getItem('permission')).storeId
			this.form.partnerUserId = JSON.parse(sessionStorage.getItem('permission')).adminCode
		},
		activated() {

		},
		methods: {
			getCertificates(e) {
				console.log(this.checked)
				if(this.checked == true) {
					this.form.certificatesValidity = '2099-01-01'
				} else {
					this.form.certificatesValidity = ''
				}
			},
			changeSelect(e) {
				console.log(e)
				this.cardNameList.forEach(item => {
					if(item.name == e) {
						this.form.bankCode = item.code
					}
				})
			},
			handleChangeStoreZone(e){
				let str = this.$refs['cascaderStoreAddr'].currentLabels.toString()
				// str = str.replace(/,/g, "")
				str = str.split(',')
				console.log(str)
				this.form.province = str[0]
				this.form.city = str[1]
				this.form.area = str[2]
			},
			handleChangeZone(e) {

				let str = this.$refs['cascaderAddr'].currentLabels.toString()
				// str = str.replace(/,/g, "")
				str = str.split(',')
				console.log(str)
				this.form.bankProv = str[0]
				this.form.bankCity = str[1]
			},
			// 获取开户行地区code用于回显
			getAddressCode() {
				var vm = this
				let arrAddress = []
				vm.optionsAddress.forEach(item => {
					if(item.label === vm.form.bankProvince) {
						arrAddress[0] = item.value
						item.children.forEach(ite => {
							if(ite.label == vm.form.bankCity) {
								arrAddress[1] = ite.value
								vm.value = arrAddress
							}
						})
					}
				})
			},
			getSTime(val) {
				this.form.certificatesValidity = val
			},
			getValidityTime(val) {
				this.form.businessLicenseValidity = val
			},
			submitForm() {
				
				if (this.form.certificatesFront.length == 0) {
					this.showMsg('请上传法人身份证正面图片', 'warning')
					return false;
				}
				if (this.form.certificatesBack.length == 0) {
					this.showMsg('请上传法人身份证反面图片', 'warning')
					return false;
				}
				if (this.form.email == '') {
					this.showMsg('请填写邮箱', 'warning')
					return false;
				}
				let data = generateObj(this.form)
				data.bankCardFont = data.bankCardFont.toString()
				data.certificatesBack = data.certificatesBack.toString()
				data.certificatesFront = data.certificatesFront.toString()
				data.bankCardInHand = data.bankCardInHand.toString()
				data.certificatesInHandFront = data.certificatesInHandFront.toString()
				data.isMarker = '2';

				this.loading = true
				this.dataApi.ajax('markerWithdrawRegistration', data, res => {
					if (res.responseType === 'S') {
						this.showMsg('保存成功')
						this.loading = false
						this.goBack()
					}
				});

			},
			selectSort() {
				this.dataApi.ajax('selectStoreClassify', {
					parentId: 0
				}, res => {
					if (res.responseType === 'S') {
						this.sortList = res.dtos
					}
				});
				this.dataApi.ajax('selectStore', null, res => {
					//console.log(res)
					if (res.responseType === 'S') {
						this.typeList = res.dtos
					}
				});

			},
			selectSort2() {
				if (this.show) {
					this.form.businessSubclass = this.form.businessSubclass
					this.show = false
				} else {
					this.form.businessSubclass = ''
				}
				this.dataApi.ajax('selectStoreClassify', {
					parentId: this.form.businessClass
				}, res => {
					//console.log(res)
					if (res.responseType === 'S') {
						this.secondList = res.dtos
					}
				});


			},
			uploading(f) {

				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});

			},
			uploading3(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			uploading4(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			uploading5(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			uploading6(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			uploading10(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			uploading7(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					//console.log(res)
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			uploading8(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					if (res.responseType == 'S') {
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			uploading9(f) {
			
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					if (res.responseType == 'S') {
						console.log(this.form)
						f.images.splice(f.index, 1, res.filePath)
						this.loading = false
					}
				});
			
			},
			uploading2(f) {
				this.loading = true
				this.dataApi.upload('FileUploadNotify/upload', f.file, res => {
					if (res.responseType == 'S') {
					f.images.splice(f.index, 1, res.filePath)
						this.storeImgList.push({
							imgHeight: res.height,
							imgUrl: res.filePath,
							imgWidth: res.width
						})
						this.loading = false
					}
				});

			},
			// selectAddress() {
			// 	this.$router.push('/merchant/map')
			// 	sessionStorage.setItem('keep', '1')
			// },
			// activate() {
			// 	this.dialogVisible = true
			// },
			// find() {
			// 	this.dataApi.ajax('singleUser', {
			// 		userId: this.id
			// 	}, res => {
			// 		if (res.responseType === 'S') {
			// 			this.userName = res.userName
			// 		}
			// 	});
			// },
	submit(){
		if(this.refuseReason == ''){
			this.showMsg('请输入拒绝理由')
		}
	    this.loading=true
	    this.dataApi.ajax('platformPreliminaryTrial',{ 
	      storeId:this.form.storeId,
	      applyStat:1,
	      refuseReason:this.refuseReason
	     }, res => {
	        if (res.responseType === 'S') {
	            this.showMsg('拒绝成功')
	            this.dialogVisible=false;
				this.newBusinessLicense = []
	            this.fetchData();
	        }
	        this.loading=false
	      }); 
	},
			hidePreview() {
				this.img.is_preview = false;
				this.img.preview_url = null;
				this.img.image_index = null;
				this.img.preview_images = [];
				this.img.transform = '';
			},
			// 重新提交
			reloadSubmit() {
				this.agree()
			},
			agree() {
				this.loading = true
				if	(this.networdUrlPhotostr.length > 0) {
					var arr7 = this.networdUrlPhotostr
					var str7 = arr7.join(',');
					this.form.networdUrlPhoto = str7
				}else{
					this.showMsg('请上传官网图', 'warning')
					return false
				}
				
				this.dataApi.ajax('platformPreliminaryTrial', {
					storeId: this.form.storeId,
					applyStat: 2,
					networdUrlPhoto: this.form.networdUrlPhoto
				}, res => {
					if (res.responseType === 'S') {
						this.loading = false
						this.showMsg("通过成功")
						this.newBusinessLicense = []
						this.fetchData();
					}else{
						this.loading = false
					}
				})
			}
		}
	}
</script>
<style>
	.editUserInfo {
		display: flex;
		justify-content: flex-start;
		padding: 20px;
		border: 1px solid #DCDCDC;
		margin-top: 20px;
	}
</style>
